<template>  <!--顶部公共部分-->
 <div class="app">
    <div class="topnav cl">
    <div class="top_left_img fl">
      <a href="https://game.qq.com/">
      </a>
    </div>
    <div class="top_center_img fl">
      <a href="https://game.qq.com/">
      </a>
    </div>
    <ul class="top_right_list fr">
      <li>游戏下载</li>
      <li>微信绑定</li>
      <li>点券充值</li>
      <li class="right_list_back">
          <a href="https://game.qq.com/">返回官网</a>
      </li>
    </ul>
  </div>
 </div>
</template>
<script>
export default {
  data: () => ({}),
  created () {},
  methods: {}
}
</script>
<style lang="less" scoped>
.app{
  width: 100%;
 background: url(//ossweb-img.qq.com/images/lol/title/top20190929.jpg) no-repeat;
 background-repeat:repeat-x;
}
.topnav{
  height: 42px;
  width: 990px;
  margin:auto;
  .top_left_img{
    height:42px;
    width: 220px;
    background: url("../../images/top20190929.jpg");
    background-position: 0px -42px;
  }
   .top_center_img{
    height:42px;
    width: 230px;
     background: url("../../images/top20190929.jpg");
    background-position: 0px -84px;
  }
  .top_right_list{
    margin-top:10px;
    height: 20px;
    li{
      float: left;
      padding: 0px 8px;
      border-right:1px solid #ccc;
    }
    li:nth-child(3){
       border: none
    }
    li:nth-child(4){
       border: none
    }
    .right_list_back{
      padding-left:28px;
      background:url("../../images/top20190929.jpg");
      background-position: 1px -137px;
    }
  }
}
</style>
